<template>
	<view class="page">

		<!-- 源码描述 -->
		<view style="background: #FFFFFF;margin-top: 30upx;">
			<textarea style="padding: 30upx 0 0 30upx;color: #191919;width: 95%;" maxlength="1000" v-model="description" value=""
				placeholder="描述下你的系统源码吧~(必填)" />

					
			<view style="margin-left: 30upx;">
				<view style="color: #B7B8BB;font-size: 28upx;">图片描述(非必填)</view>
			</view>
	
			<view style="display: flex;flex-direction: row;align-items: center;">
				<image style="width: 160upx;height: 160upx;margin-top: 26upx;margin-bottom: 30upx;margin-left: 30upx;"
					src="../../static/images/publish-img-icon.png" mode="" @click="uploadImgLocal"></image>
				<view style="display: flex;flex-direction: row;position: relative;" v-for="(item,index) in uploadImgList" :key="index">
					
					
					<image :src="item" @tap="previewImg(index)" style="width: 160upx;height: 160upx;border-radius: 12upx;margin-left: 16upx;" mode="aspectFill"></image>
					<view style="background: #000000;border-radius: 16upx;width: 32upx;height: 32upx;line-height: 32upx;
					position: absolute;left: 75%;top: 8%;
					text-align: center;opacity:0.6" @click="removeImg(index)">
						<span style="color: #FFFFFF;width: 14upx;height: 14upx;">×</span>
					</view>
				</view>	
				
			</view>

		</view>

		<!-- 基本信息 -->
		<view class="publish-demand-wrapper">
			<view style="display: flex;flex-direction: row;align-items: center;
			margin-left: 30upx;border-bottom: 1upx solid #F8F8F8;height: 96upx;">
				<view style="display: flex;align-items: center;">
					<image style="width: 32upx;height: 32upx;" src="../../static/images/demand-title-icon.png" mode="">
					</image>
					<span style="color: #191919;font-size: 28upx;margin-left: 18upx;">源码标题</span>
				</view>

				<input type="text" style="text-align: right;width: 70%;color: #191919;" maxlength="15" v-model="title"
					placeholder="一句话概括下吧" />

			</view>

			<view style="display: flex;flex-direction: row;justify-content: space-between;
			margin-left: 30upx;margin-right: 60upx;border-bottom: 1upx solid #F8F8F8;height: 96upx;align-items: center;">
				<view style="display: flex;align-items: center;">
					<image style="width: 32upx;height: 32upx;" src="../../static/images/estimate-price-tcon.png"
						mode="">
					</image>
					<span style="color: #191919;font-size: 28upx;margin-left: 18upx;">价格</span>
				</view>
				<input type="number" style="text-align: right;width: 70%;color: #191919;" v-model="price"
					placeholder="请输入价格" />

			</view>

			<view style="display: flex;flex-direction: row;justify-content: space-between;
			margin-left: 30upx;margin-right: 30upx;border-bottom: 1upx solid #F8F8F8;height: 96upx;">
				<view style="display: flex;align-items: center;">
					<image style="width: 32upx;height: 32upx;" src="../../static/images/tech-lang-icon.png" mode="">
					</image>
					<span style="color: #191919;font-size: 28upx;margin-left: 18upx;">开发语言</span>
				</view>
				<view style="display: flex;flex-direction: row;align-items: center;">

					<picker mode="selector" :range="techTypeList" :value="techType"
						@change="bindTechTypePickerChange($event,techTypeList)" range-key="name">
						<view style="color: #191919;font-size: 28upx;line-height: 96upx;">
							{{techTypeList[techType].name}}
						</view>
					</picker>
					<image style="width: 24upx;height: 24upx;margin-left: 8upx;"
						src="../../static/images/right-avatar-icon.png" mode=""></image>
				</view>

			</view>

		</view>

		<view style="position: fixed;bottom: 0upx;margin-bottom: 68upx;padding: 0 30upx;" @click="publishCode">
			<view style="width: 690upx;height: 80upx;background: #FF4E4C;border-radius: 40upx;
			text-align: center;line-height: 80upx;">发布</view>
		</view>

	</view>
</template>

<script>
	import {
		get
	} from '../../utils/local.js'
	
	import {baseUrl} from '../../utils/request'
	import {source_code_publish} from '../../api/source-code/source-code.js'
	import {
		estimate_list
	} from '../../api/home/demand.js'
	import {
		techType_pull
	} from '../../api/home/demand.js'

	function getDate(type) {
		const date = new Date();

		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;

		return `${year}-${month}-${day}`;
	}
	export default {
		data() {
			return {
				mobile: "",
				email: "",
				wechatAccount: "",
				description: "",
				title: "",
				estimate: 0,
				techType: 0,
				estimateList: [],
				techTypeList: [],
				price:"",
				isTechAuth:1,
				techTypeId: 1,
				date: getDate({
					format: true
				}),
				startDate: getDate('start'),
				endDate: getDate('end'),
				uploadImgList:[],
				imgList:[]
			}
		},

		onShow() {
			this.getEstimateList();
			this.getTechTypeList();

			let userInfo = get('userInfo')
			if (userInfo) {
				this.isTechAuth = JSON.parse(userInfo).isTechAuth
			}

		},
		methods: {
			previewImg(index) {
				console.log("index:"+index)
				let _this = this;
				let imgsArray = [];
				for (let i = 0; i < this.uploadImgList.length; i++) {
						imgsArray.push(this.uploadImgList[i]);
					
				}
				uni.previewImage({
					current: index,
					urls: imgsArray,
					indicator: 'number',
					loop: true,
					longPressActions:{
						itemList:['保存图片'],
						success(res) {
							console.log(res)
							uni.downloadFile({
								url:this.uploadImgList[index],
								success(result) {
									uni.saveImageToPhotosAlbum({
										filePath:result.tempFilePath,
										success() {
											uni.showToast({
												title:'保存成功'
											})
										}
									})
								}
							})
						}
					}
				});
			},
			removeImg(index){
				console.log("index:"+index)
				var temArray=[]
				for (var i = 0; i < this.uploadImgList.length; i++) {
					if(i !==index){
						temArray.push(this.uploadImgList[i])
					}
				}
				this.uploadImgList=temArray
				
			},
			uploadImgLocal() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths)
						this.uploadImgList=tempFilePaths
					}
				})
			},
			uploadImgs(){
				const arr = []
				
				const _this = this
				for (var i = 0; i < this.uploadImgList.length; i++) {
					const a = new Promise(reslut => {
						uni.uploadFile({
							url: baseUrl+'/upload/img',
							filePath:this.uploadImgList[i],
							name:'file',
							success(res) {
								_this.imgList.push(JSON.parse(res.data).data)
								reslut()
							}
						})
					})
					arr.push(a)
				}
				return Promise.all(arr)
			},
			publishCode() {
				let params = {}
				if (this.description === null || this.description === '') {
					uni.showToast({
						title: '请输入系统源码描述',
						icon:'none',
						duration:1000
					})
					return
				}
				if (this.title === null) {
					uni.showToast({
						title: '请输入系统标题',
						icon:'none',
						duration:1000
					})
					return
				}
				if (this.price === null || this.price ==='') {
					uni.showToast({
						title: '请输入系统源码价格',
						icon:'none',
						duration:1000
					})
					return
				}
				if (this.techTypeId === null) {
					uni.showToast({
						title: '请选择开发语言',
						icon:'none',
						duration:1000
					})
					return
				}
		
			
				params.techTypeId = this.techTypeId
				params.description = this.description
				params.price = this.price
				params.title = this.title
				uni.showLoading({
					title:'发布中~',
					mask:true
				})
				this.uploadImgs().then(() =>{
					params.images=this.imgList
					source_code_publish(params).then(res => {
						if (res.status === 200) {
							uni.hideLoading()
							uni.navigateTo({
								url: '../publish-code-success/publish-code-success'
							})
						}
					})
				})
			},

			bindDateChange: function(e) {
				this.date = e.detail.value;
			},
			getEstimateList() {
				estimate_list().then(res => {
					if (res.status === 200) {
						this.estimateList = res.data
					} else if (res.status === 401) {
						uni.navigateTo({
							url: '../login/login'
						})
					}

				})
			},
			getTechTypeList() {
				techType_pull().then(res => {
					if (res.status === 200) {
						this.techTypeList = res.data
					} else if (res.status === 401) {
						uni.navigateTo({
							url: '../login/login'
						})
					}

				})
			},

			linkPublishSuccess() {
				uni.navigateTo({
					url: "../publish-demand-success/publish-demand-success"
				})
			},
			bindPickerChange: function(e, estimateList) {
				this.estimate = e.target.value
				this.estimateAmountId = (estimateList[this.estimate].id)
				console.log(this.estimateAmountId)
			},
			bindTechTypePickerChange: function(e, techTypeList) {
				this.techType = e.target.value
				this.techTypeId = (techTypeList[this.techType].id)
				console.log(this.techTypeId)
			}
		}
	}
</script>

<style>
	.page {
		color: #F8F8F8;
	}

	.publish-demand-wrapper {
		display: flex;
		flex-direction: column;
		margin-top: 24upx;
		background: #FFFFFF;
	}
</style>
